<template>
  <div class="create-score-container">
    <el-card class="create-score-card">
      <h2 class="create-score-title">新建谱子</h2>
      <el-form :model="form" :rules="rules" ref="form" label-width="90px" class="create-score-form">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-divider>基础信息</el-divider>
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="副标题" prop="subtitle">
              <el-input v-model="form.subtitle" placeholder="请输入副标题" />
            </el-form-item>
            <el-form-item label="作曲" prop="composer">
              <el-input v-model="form.composer" placeholder="请输入作曲者" />
            </el-form-item>
            <el-form-item label="作词" prop="lyricist">
              <el-input v-model="form.lyricist" placeholder="请输入作词者" />
            </el-form-item>
            <el-form-item label="水印名称" prop="copyright">
              <el-input v-model="form.copyright" placeholder="请输入水印名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-divider>曲谱信息</el-divider>
            <el-form-item label="节拍" prop="beat">
              <el-select v-model="form.beat" placeholder="请选择节拍">
                <el-option label="4/4" value="4/4" />
                <el-option label="3/4" value="3/4" />
                <el-option label="2/4" value="2/4" />
                <el-option label="6/8" value="6/8" />
              </el-select>
            </el-form-item>
            <el-form-item label="调号" prop="key">
              <el-select v-model="form.key" placeholder="请选择调号">
                <el-option label="Cb" value="Cb" />
                <el-option label="Gb" value="Gb" />
                <el-option label="Db" value="Db" />
                <el-option label="Ab" value="Ab" />
                <el-option label="Eb" value="Eb" />
                <el-option label="Bb" value="Bb" />
                <el-option label="F" value="F" />
                <el-option label="C" value="C" />
                <el-option label="G" value="G" />
                <el-option label="D" value="D" />
                <el-option label="A" value="A" />
                <el-option label="E" value="E" />
                <el-option label="B" value="B" />
                <el-option label="F#" value="F#" />
                <el-option label="C#" value="C#" />
              </el-select>
            </el-form-item>
            <el-form-item label="谱表类型" prop="scoreType">
              <el-select v-model="form.scoreType" placeholder="请选择谱表类型">
                <el-option label="单声部" value="单声部" />
                <el-option label="双声部" value="双声部" />
                <el-option label="三声部" value="三声部" />
                <el-option label="四声部" value="四声部" />
              </el-select>
            </el-form-item>
            <el-form-item label="速度数值" prop="tempo">
              <div style="display: flex; align-items: center; gap: 16px;">
                <el-slider v-model="form.tempo" :min="1" :max="300" style="flex: 1;" />
                <el-input-number v-model="form.tempo" :min="1" :max="300" />
                <span style="margin-left: 8px;">bpm</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="create-score-actions">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">创建</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'CreateScore',
  data() {
    return {
      form: {
        beat: '4/4',
        key: 'C',
        scoreType: '双声部',
        tempo: 120,
        title: '标题',
        subtitle: '副标题',
        composer: '作曲者',
        lyricist: '作词者',
        copyright: '双手简谱'
      },
      rules: {
        beat: [{ required: true, message: '请选择节拍', trigger: 'change' }],
        key: [{ required: true, message: '请选择调号', trigger: 'change' }],
        scoreType: [{ required: true, message: '请选择谱表类型', trigger: 'change' }],
        tempo: [{ required: true, message: '请输入速度', trigger: 'blur' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        subtitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
        composer: [{ required: true, message: '请输入作曲者', trigger: 'blur' }],
        lyricist: [{ required: true, message: '请输入作词者', trigger: 'blur' }],
        copyright: [{ required: true, message: '请输入水印名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapActions(['setScoreDraft']),
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.setScoreDraft({ ...this.form })
          this.$router.push({ path: '/editor' })
        }
      })
    },
    onCancel() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.create-score-container {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-score-card {
  width: 900px;
  padding: 40px 30px 30px 30px;
  background: #fff;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
  border-radius: 12px;
}
.create-score-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: #222;
}
.create-score-form {
  margin-top: 10px;
}
.create-score-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style> 